<template>
    <div class="home">
        <van-image
            width="100%"
            height="3.68rem"
            :src="bgHeader"
        />
        <van-field
                v-model="params.name"
                label="姓名"
                type="text"
                placeholder="请输入"
                input-align="right"
                required
        />
        <van-cell :value="params.sex" is-link @click="handleSelectGender">
            <template slot="title">
                <span class="custom-title">性别</span>
                <span style="color: #FF5E71;">*</span>
            </template>
        </van-cell>
        <van-cell :value="params.nation" is-link @click="handleSelectZu">
            <template slot="title">
                <span class="custom-title">民族</span>
                <span style="color: #FF5E71;">*</span>
            </template>
        </van-cell>
        <van-field
                v-model="params.height"
                label="身高"
                type="number"
                placeholder="请输入"
                input-align="right"
                required
        >
            <template slot="right-icon">
                <span>cm</span>
            </template>
        </van-field>
        <van-field
                v-model="params.weight"
                label="体重"
                type="number"
                placeholder="请输入"
                input-align="right"
                required
        >
            <template slot="right-icon">
                <span>kg</span>
            </template>
        </van-field>
        <van-cell :value="params.diplomas" is-link @click="handleSelectEdu">
            <template slot="title">
                <span class="custom-title">学历</span>
                <span style="color: #FF5E71;">*</span>
            </template>
        </van-cell>
        <van-cell :value="params.birthDate" @click="handleSelectBirth" is-link>
            <template slot="title">
                <span class="custom-title">出生年月</span>
                <span style="color: #FF5E71;">*</span>
            </template>
        </van-cell>
        <van-field
                class="four"
                v-model="params.phone"
                label="联系方式"
                type="tel"
                placeholder="请输入"
                input-align="right"
                required
        />

        <div class="btn-next">
            <van-button type="info" @click="handleNext">下一步</van-button>
        </div>

        <van-popup
                v-model="showBirth"
                position="bottom"
                :style="{ height: '50%' }"
        >
            <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    :min-date="minDate"
                    @confirm="handleConfirmBirth"
                    @cancel="showBirth = false"
            />
        </van-popup>

        <van-popup
                v-model="showPopup"
                position="bottom"
                :style="{ height: '50%' }"
        >
            <van-picker
                    show-toolbar
                    :columns="columns"
                    @cancel="showPopup = false"
                    @confirm="handleConfirmPopup"
            />
        </van-popup>
    </div>
</template>
<script>
    import format from 'date-fns/format';
    import { Notify } from "vant";
    import https from "../https";
    export default {
        components: {
        },
        data() {
            return {
                height: null,
                weight: null,
                currentDate: new Date(),
                birth: "请选择",
                minDate: new Date('1920/01/01'),
                showBirth: false,
                showPopup: false,
                columns: [],
                params: {
                    "birthDate": "请选择",
                    "diplomas": "请选择",
                    "drugCombination": "",
                    "etiology": "",
                    "height": null,
                    "hospital": "",
                    "inHospital": "y",
                    "isAmentia": "y",
                    "isAnesthesia": "y",
                    "isAstriction": "y",
                    "isBellyFailure": "y",
                    "isCardiovascularFailure": "y",
                    "isCirrhosis": "y",
                    "isDiabetes": "y",
                    "isGastroenterology": "y",
                    "isIntestinalFailure": "y",
                    "isIntestinalTumor": "y",
                    "isLaxative": "y",
                    "isPsychosis": "y",
                    "isRectumHistory": "y",
                    "isRenalFailure": "y",
                    "isThyroidFailure": "y",
                    "makeDate": "",
                    "makeTime": "",
                    "medicalReasons": "",
                    "name": "",
                    "nation": "请选择",
                    "phone": "",
                    "remark": "",
                    "reviewMode": "",
                    "sex": "请选择",
                    "weight": null,
                },
                type: '',
                bgHeader: require("../images/bg@2x.png")
            }
        },
        created() {
            document.title = '清肠规范指导预约';
        },
        mounted() {
            this.params = JSON.parse(localStorage.getItem('params')) || this.params;
        },
        methods: {
            handleNext() {
                const { name, sex, nation, height, weight, diplomas, birthDate, phone } = this.params;
                if (!name) {
                    Notify({ type: 'warning', message: '请输入姓名' });
                    return;
                }
                if (!sex) {
                    Notify({ type: 'warning', message: '请选择性别' });
                    return;
                }
                if (!nation) {
                    Notify({ type: 'warning', message: '请选择民族' });
                    return;
                }
                if (!height) {
                    Notify({ type: 'warning', message: '请输入身高' });
                    return;
                }
                if (!weight) {
                    Notify({ type: 'warning', message: '请输入体重' });
                    return;
                }
                if (!diplomas) {
                    Notify({ type: 'warning', message: '请选择学历' });
                    return;
                }
                if (!birthDate) {
                    Notify({ type: 'warning', message: '请选择出生日期' });
                    return;
                }
                if (!phone) {
                    Notify({ type: 'warning', message: '请输入联系方式' });
                    return;
                }
                if (!/^[1]([3-9])[0-9]{9}$/.test(phone)) {
                    Notify({ type: 'warning', message: '请输入正确的联系方式' });
                    return;
                }
                localStorage.setItem('params', JSON.stringify(this.params));
                this.$router.push("/special");
            },
            handleSelectGender() {
                this.showPopup = true;
                this.type = 'sex'
                this.columns = ['男', '女']
            },
            handleSelectBirth() {
                this.showBirth = true
            },
            handleSelectZu() {
                this.showPopup = true;
                this.type = 'nation'
                this.columns = ['汉族', '少数民族'];
            },
            handleSelectEdu() {
                this.showPopup = true;
                this.type = 'diplomas'
                this.columns = ['小学', '初中', '高中', '大学'];
            },
            handleConfirmBirth(val) {
                this.showBirth = false
                this.params.birthDate = format(val, 'YYYY-MM-DD')
                this.currentDate = new Date(format(val, 'YYYY/MM/DD'))
            },
            handleConfirmPopup(val) {
                this.showPopup = false
                switch(this.type) {
                    case 'sex':
                        this.params.sex = val
                        break;
                    case 'nation':
                        this.params.nation = val
                        break;
                    case 'diplomas':
                        this.params.diplomas = val
                        break;
                    default:
                        break;
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .home {
        height: 100%;
        background-color: #FAFAFA;
        .van-image {
            display: block;
        }
    }
    .btn-next {
        text-align: center;
        margin: .5rem auto;
    }
    .van-picker {
        position: fixed;
        width: 100%;
    }
</style>

